<template>
  <ScreenLayoutWithMenu title="数据可视化大屏 - 订单分析">
    <!-- KPI统计数据行 -->
    <div class="kpi-section">
      <KPICard label="销售额" value="16,757,725" />
      <KPICard label="销售数量" value="150,779" />
      <KPICard label="完成率" value="49.95%" />
      <KPICard label="产品成本" value="3,693,997" />
      <KPICard label="毛利率" value="64.61%" green />
    </div>

    <!-- 图表区域 -->
    <div class="screen-grid grid-inventory">
      <ChartCard title="月度销售额累计与完成率趋势" grid-area="a">
        <ECharts :option="salesAccumulationOption" />
      </ChartCard>
      <ChartCard title="客户生命周期分析" grid-area="b">
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th>客户ID</th>
                <th>客户首次购买日期</th>
                <th>客户周期(月)</th>
                <th>客户最后一次购买日期</th>
                <th>销售额</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, index) in customerLifecycleData" :key="index">
                <td>{{ row.customerId }}</td>
                <td>{{ row.firstPurchase }}</td>
                <td>{{ row.cycle }}</td>
                <td>{{ row.lastPurchase }}</td>
                <td>{{ row.salesAmount.toLocaleString() }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </ChartCard>
      <ChartCard title="产品生命周期分析" grid-area="c">
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th>产品名称</th>
                <th>产品首次购买日期</th>
                <th>产品周期(月份)</th>
                <th>销售额</th>
                <th>排名</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, index) in productLifecycleData" :key="index">
                <td>{{ row.productName }}</td>
                <td>{{ row.firstPurchase }}</td>
                <td>{{ row.cycle }}</td>
                <td>{{ row.salesAmount.toLocaleString() }}</td>
                <td>{{ row.rank }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import KPICard from '../components/KPICard.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import * as echarts from 'echarts'
import './Screen.css'

const salesAccumulationOption = ref({})
const customerLifecycleData = ref([])
const productLifecycleData = ref([])

onMounted(() => {
  // 月度销售额累计与完成率趋势
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const cumulativeSales = []
  let sum = 0
  const monthlySales = [800000, 1200000, 500000, 1000000, 1100000, 1300000, 1200000, 1400000, 1500000, 1450000, 1600000, 1757725]
  const completionRates = [54.49, 72.65, 18.16, 36.33, 40.25, 48.58, 44.59, 52.93, 56.12, 54.87, 60.40, 49.95]
  
  monthlySales.forEach(sales => {
    sum += sales
    cumulativeSales.push(sum)
  })

  salesAccumulationOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['YTD Sales', '月度完成率'],
      textStyle: { color: '#fff' },
      top: 10,
      formatter: function(name) {
        if (name === 'YTD Sales') {
          return '● ' + name
        }
        return name
      }
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { 
        color: '#fff',
        formatter: function(value, index) {
          if (index === 0) {
            return value + '\n2024'
          }
          return value
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '销售额',
        min: 0,
        max: 20000000,
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { 
          color: '#fff', 
          formatter: function(value) {
            if (value >= 1000000) {
              return (value / 1000000).toFixed(0) + 'M'
            }
            return value.toString()
          }
        },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '完成率',
        min: 0,
        max: 50,
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}%' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: 'YTD Sales',
        type: 'bar',
        data: cumulativeSales,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#36cfc9' },
            { offset: 1, color: '#1890ff' }
          ])
        }
      },
      {
        name: '月度完成率',
        type: 'line',
        yAxisIndex: 1,
        data: completionRates,
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800',
          formatter: '{c}%'
        }
      }
    ]
  }

  // 客户生命周期数据
  customerLifecycleData.value = [
    {
      customerId: 'Customer_10',
      firstPurchase: '2022/2/22 0:00:00',
      cycle: 36,
      lastPurchase: '2025/2/21 0:00:00',
      salesAmount: 16757721
    }
  ]

  // 产品生命周期数据
  productLifecycleData.value = [
    { productName: 'Product_1', firstPurchase: '2022/2/22 0:00:00', cycle: 36, salesAmount: 3046859, rank: 1 },
    { productName: 'Product_10', firstPurchase: '2022/2/22 0:00:00', cycle: 36, salesAmount: 1015620, rank: 1 },
    { productName: 'Product_2', firstPurchase: '2022/2/22 0:00:00', cycle: 36, salesAmount: 507810, rank: 1 },
    { productName: 'Product_3', firstPurchase: '2022/2/22 0:00:00', cycle: 36, salesAmount: 2554669, rank: 1 },
    { productName: 'Product_4', firstPurchase: '2022/2/22 0:00:00', cycle: 36, salesAmount: 3554669, rank: 1 },
    { productName: 'Product_5', firstPurchase: '2022/2/22 0:00:00', cycle: 36, salesAmount: 2285968, rank: 1 },
    { productName: 'Product_6', firstPurchase: '2022/2/22 0:00:00', cycle: 36, salesAmount: 2956341, rank: 1 },
    { productName: 'Product_7', firstPurchase: '2022/2/22 0:00:00', cycle: 36, salesAmount: 3234567, rank: 1 },
    { productName: 'Product_8', firstPurchase: '2022/2/22 0:00:00', cycle: 36, salesAmount: 2123456, rank: 1 },
    { productName: 'Product_9', firstPurchase: '2022/2/22 0:00:00', cycle: 36, salesAmount: 1876543, rank: 1 }
  ]
})
</script>

<style scoped>

.table-container {
  height: 100%;
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table thead {
  background: rgba(24, 144, 255, 0.2);
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table th,
.data-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(24, 144, 255, 0.2);
  color: #fff;
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: rgba(24, 144, 255, 0.1);
}

.data-table th {
  font-weight: bold;
  color: #36cfc9;
  background: rgba(24, 144, 255, 0.2);
}
</style>
